import React, { Component } from 'react';
import { TextareaItem, Toast, WingBlank } from 'antd-mobile';
import { Button, Image, ScrollView, StatusBar, TouchableWithoutFeedback, View } from 'react-native';
import styles from './style';

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: '',
    };
    this.changeContent = this.changeContent.bind(this);
  }

  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    return {
      title: '意见反馈',
      headerTitleStyle: {
        color: '#fff',
      },
      headerStyle: {
        backgroundColor: '#ed4040'
      },
      headerLeft: (
        <TouchableWithoutFeedback onPress={() => {
          Toast.hide();
          navigation.goBack();
        }}>
          <View>
            <Image style={{ width: 23, height: 23, tintColor: '#fff', marginLeft: 10 }}
                   source={require('../../images/back.png')}
                   resizeMode="cover"
            />
          </View>
        </TouchableWithoutFeedback>
      ),
      headerRight: <Button title="提交" color='#fff' onPress={() => params.clickRight()} />
    };
  };

  async componentDidMount() {
    this.props.navigation.setParams({ clickRight: this.showActionSheet.bind(this) });
  }

  showActionSheet = async () => {
    const { navigation } = this.props;
    const { content } = this.state;
    if (!content) {
      Toast.info('请输入您的宝贵意见', 2, f => f, false);
      return false;
    }
    Toast.loading('加载中...', 999999999999);
    let f = await fetch('https://ecmad.com/toutiao/api/feedback/add', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        content,
      }),
    }).catch(() => {
      Toast.offline('网络异常', 2, f => f, false);
    });
    let res = await f.json();
    if (res.code === 200) {
      Toast.success('反馈成功，我们会认真考虑您的意见', 2, () => navigation.goBack(), false);
    } else {
      Toast.offline('网络异常', 2, f => f, false);
    }
  };

  changeContent(val) {
    this.setState({
      content: val,
    });
  }

  render() {
    return (
      <ScrollView style={styles.feedback}>
        <StatusBar barStyle="light-content" />
        <WingBlank size="sm">
          <TextareaItem
            style={styles.textarea}
            autoHeight
            placeholder="请输入您的宝贵意见..."
            rows={10}
            labelNumber={5}
            onChange={this.changeContent}
          />
        </WingBlank>
      </ScrollView>
    );
  }
}
